<template>
  <view>
    <!-- 1 搜索框 -->
    <ugo-search></ugo-search>
    <!-- 2 tabs标签栏 -->
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      :bar-width="150"
      active-color="red"
      :active-item-style="{color:'black'}"
    ></u-tabs>

    <!-- 3 tabs对应内容 -->
    <view v-if="current===0">

      <navigator
        class="goods-item"
        v-for="item in goods"
        :key="item.goods_id"
        :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id"
      >
        <view class="goods-img">
          <u-image
            width="191rpx"
            height="191rpx"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <view class="goods-info">
          <view class="goods-name u-line-2">{{item.goods_name}}</view>
          <view class="goods-price">{{item.goods_price}}</view>
        </view>
      </navigator>
    </view>
    <view v-else-if="current===1">
      销量的内容
      <div class="sales"></div>

    </view>
    <view v-else-if="current===2">
      价格的内容
    </view>

  </view>
</template> 

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,

      // 接口要求 参数
      params: {
        // 否	string	关键字
        query: "",
        // 否	string	分类id
        cid: "",
        // 否	number	页码  1
        pagenum: 1,
        // 否	number	页容量  20条
        pagesize: 20,
      },
      goods: [],

      // 接口数据的总长度
      total: 0,
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },

    // 获取商品列表数据
    async getGoods() {
      const res = await this.$u.get("/goods/search", this.params);
      console.log(res);
      this.goods = [...this.goods, ...res.message.goods];

      this.total = res.message.total;
      // console.table(this.goods);

      // uni.stopPullDownRefresh();
    },
  },
  // onLoad 形参 可以获取到对应的url参数
  onLoad(option) {
    // 获取上一个页面传递过来的id
    this.params.cid = option.id || 5;

    this.getGoods();
  },
  // 滚动条触底
  onReachBottom() {
    /* 
    0 判断还有没有下一页数据  （拿当前的数组长度 和 总数据长度比较！！）
      1 没有 提示用户 
      2 有  。。。
    1 对页码参数 ++ pagenum++ 
    2 重新发送请求 
    3 数据响应回来  对数组进行合并 
     */

    if (this.goods.length >= this.total) {
      // 没有更多数据

      uni.showToast({
        title: "没有更多数据了",
        icon: "none",
      });

      return;
    }

    this.params.pagenum++;
    this.getGoods();
  },

  // 监听用户下拉刷新动作
  async onPullDownRefresh() {
    /* 
    重置 
    1 重置页面中显示的数据 goods=[]
    2 重置 参数 页码  1 
    3 重新发送请求 获取数据
     */
    this.goods = [];
    this.params.pagenum = 1;
    // 异步的！！！
    await this.getGoods();
    uni.stopPullDownRefresh();
  },
};
</script>

<style lang="scss">
.goods-item {
  display: flex;
  margin-top: 10rpx;
  border-bottom: 1rpx solid #ccc;
  .goods-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .goods-info {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods-name {
      font-size: 28rpx;
    }
    .goods-price {
      color: $themeColor;
    }
  }
}
</style>